<template>
  <uni-nav-bar title="拼单记录" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package_sale center"
    style="border-bottom:1px solid #eee;padding:20rpx 0px 10rpx;box-sizing: border-box; justify-content: space-around;">
    <view class="column list" v-for="(item,index) in list" :key="item.name" @click="change(index)">
      <view :style="{color:current===index?'#333':'#666'}">{{item.name}}</view>
      <view :style="{background:current===index?'#1B91FF':'#fff'}"></view>
    </view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <List :orderLists="orderLists"></List>
    <Popu v-if="orderLists.length<1" :pageHeight="pageHeight" text="暂无拼单记录"></Popu>
  </scroll-view>
</template>
<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import Popu from '@c/earthPushing/common/popu.vue';
  import List from '@c/together/list.vue';
  import { toPublish } from '@mqtt';
  import { getPinOrderList } from '@/gql/together';
  import { showLoading } from '@/utils/prompt';
  import { ref } from 'vue';
  import { getDriverID } from '@/stores/driverID';
  const driver_id = getDriverID();
  const list = [{ name: '我发起的' }, { name: '我参与的' }]
  const current = ref(0)

  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);

  const pageHeight = ref('');
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 110).toString();
    },
  });
  init()
  function init() {
    showLoading()
    isLoading.value = true;
    const payload = {
      query: getPinOrderList,
      variables: {
        page: currentPage.value,
        type: current.value === 0 ? 1 : 2,
        driver_id,
      },
    };
    toPublish(
      'ql/driver/getPinOrderList',
      payload,
      (obj : any) => {
        const { getPinOrderList } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getPinOrderList.list];
        lastPage.value = getPinOrderList.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  function change(index : number) {
    current.value = index;
    currentPage.value = 1
    orderLists.value = []
    init();
  }
</script>

<style scoped lang="less">
  .list {
    width: 200rpx;
    color: #666;

    view:nth-of-type(2) {
      width: 67rpx;
      height: 8rpx;
      margin-top: 10rpx;
      border-radius: 5px;
    }
  }
</style>